<style>
  .contract-list-title-area {
    line-height: 20px;
  }

  .contract-list-title-area span {
    display: inline-block;
    width: 100%;
  }

  .append-temp li:hover {
    background-color: #5e67a5;
    color: #fff;
  }

  .icon-Gm-sort-ascending,
  .icon-Gm-sort-descending {
    position: absolute;
    top: 50%;
    left: 74%;
    transform: translate(0, -60%);
  }

  .qdsj {
    float: left;
    padding-left: 24px;
  }

  .contract-list-item:last-child{
    border-bottom: none;
  }

  .head-container{
    position: relative;
    padding: 10px 0px 14px;
    margin:0 24px 0;
    border-bottom: 1px solid #E3E3E5;
  }
  .head-container .mes{
    overflow: hidden;
    margin-right: 10px;
    float: left;
  }
  .head-container .mes p{
    font-size: 12px;
    color:#CFCFCF;
    margin-bottom: 6px;
  }
  .head-container .mes input{
    width: 200px;
    height: 34px;
  }
  .head-container .flow{
    float: left;
    margin-right: 10px;
  }
  .head-container .flow p{
    font-size: 12px;
    color:#CFCFCF;
    margin-bottom: 6px;
  }
  .head-container .flow .flow-select{
    width: 140px;
    height: 34px;
  }
  .head-container .button-group{
    padding-top: 23px;
  }
  .second-select .js-selected-q{
    margin-left: 0px;
    padding-left: 25px;
  }
  .third-select .js-selected-q{
    margin-left: 0px;
    padding-left: 50px;
  }
  .js-selected-q b{
    width: auto!important
  }
  .js-selected-project .js-selected-project-box .js-selected-q{
    background-position: 170px -30px;
  }
  .js-selected-project .js-selected-project-box div.active{
    background-position: 170px 26px;
  }
  .js-selected-project .js-selected-project-box .js-selected-q b{
    margin-left: 10px;
  }
  .second-select>li b{
    text-indent: 0em;
  }
  .first-select .ellipsis-1{
    min-width: 175px;
    max-width: 150px;
    padding-right: 45px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .second-select .ellipsis-1{
    min-width: 140px;
    max-width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .third-select b{
    min-width: 120px;
    max-width: 80px;
    padding-right: 30px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

</style>

<section id="contract-list">
  <!-- 右边 -->
  <div class="js-selected-project ">
    <div class="css-pack-up"></div>
    <div class="js-selected-project-bg">
    </div>
    <div class="js-selected-project-box">
      <div class="select-project">
        <!--右侧公司-->
      </div>
    </div>
  </div>

  <hl-page-header title="变更管理" style="margin:0 24px;"></hl-page-header>
  <div class="head-container clearfix plr-24">
    <div class="clearfix">
      <div class="flow">
        <p>信息检索</p>
        <div>
          <input type="text" class="global_ipt_text js-name-kh" placeholder="客户/合同名称/合同编号/合同管理编号" v-model="keywords" @keyup.enter="search" style="width:250px;">
        </div>
      </div>
      <div class="button-group">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="reset" size="mini">重置</hl-button>
      </div>
    </div>
  </div>

  <!--审核状态-->
  <div class="mlr-24 global_screening_container">
    <hl-checkbox-button :data="listMenu" v-model="selectedListMenuCode" @on-click="selectMenuList" merge></hl-checkbox-button>
    <span class="global_refresh_icon icon-uniE94B" @click="resetTabbar" style="left:196px"></span>
  </div>

  <div class="mtb-10 mlr-24 js-get-contract br-4 global_table" style="border:1px solid #E5E5E5">
    <div class="clearfix border-b text-center dy-flex global_table_title" style="line-height:40px;">
      <div class="dy-fx-1">序</div>
      <div class="dy-fx-2">变更单号</div>
      <div class="dy-fx-3">关联单据</div>
      <div class="dy-fx-3">合同名称</div>
      <div class="dy-fx-2">发起人</div>
      <div class="dy-fx-2 cursor relative" @click="sortBySTTime()">
        <span class="qdsj">执行日期</span>
        <span class="icon-Gm-sort-ascending bt-icon"><span class="path1" style="fontSize:22px"></span><i class="path2" style="fontSize:22px"></i></span>
      </div>
      <div class="dy-fx-2">状态</div>
      <div class="dy-fx-2 border-l">操作</div>
    </div>
    <div class="text-center">
      <ul class="clearfix contract-list-item dy-flex global_table_item" v-for="(item,index) in dataList" :id="item.id" style="line-height:40px;margin:0">
        <li class="dy-fx-1">{{index + 1
          < 10 ? '0' + (index + 1) : index + 1 }} </li>
            <li class="dy-fx-2 ellipsis-1" :title="item.alterNo">{{ item.alterNo }}</li>
            <li class="dy-fx-3 ellipsis-1 projectName" :title="item.mCode">{{item.mCode}}</li>
            <li class="dy-fx-3 ellipsis-1 projectName" :title="item.mCode">{{item.contractName || '--'}}</li>
            <li class="dy-fx-2 ellipsis-1 customerName">{{item.alterUserName}}</li>
            <li class="dy-fx-2 ellipsis-1">{{item.effectiveDate | formatDate}}</li>
            <li class="dy-fx-2 ellipsis-1">{{ item.statusVal || '--' }}</li>
            <li class="dy-fx-2 ellipsis-1 border-l">
              <a :href="'#/contractUpdateDetails?id='+ item.id + '&contractId=' + item.contractId + '&ddtab=true'" target="_blank" :id="item.id" class="mr-5">查看</a>
              <a  v-show="item.status == 'CG' || item.status == 'FBP' || item.status == 'FCP'" :id="item.id" href="javascript:;" @click="submitContract(item.id)" v-if="permissions.indexOf('c123') > -1">提交</a>
              <a  v-show="item.status == 'CG' || item.status == 'FBP' || item.status == 'FCP'" :id="item.id" @click="invalidContract(item.id)" v-if="permissions.indexOf('c124') > -1">作废</a>
            </li>
      </ul>
    </div>
  </div>
  <div class="user-page pl-24 pr-24 ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{totalCount}}</i>条记录</span>
      <span>每页<hl-select :data="pageLimits" v-model="limit" width="80" @on-change="updateLimit"></hl-select>条</span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="currentPage" :total="totalPage" @change="search"></hl-pagination>
    </div>
  </div>
  <!--遮罩-->
  <div class="backdrop" v-show="isShowSubmitLayer"></div>
</section>

<script src="modules/system_config/scripts/right_company.js" charset="utf-8"></script>
<script src="modules/contract/scripts/contract_update_list.js" charset="utf-8"></script>
